<template>
	<view class="gas-page">

		<!-- 主标题 -->
		<view class="main-title">
			<text>{{station_name}}</text>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 选择枪号区域 -->
			<view class="section">
				<view class="section-title">
					<text>选择枪号</text>
				</view>
				<view class="gun-info" @click="openOil">
					<view class="gun-badge" v-if="form.gun_name">{{form.gun_name}}</view>
					<text class="gun-type">{{form.oil_name}}</text>
					<!-- <text class="admin-text">超级管理员</text> -->
				</view>

			</view>

			<!-- 输入金额区域 -->
			<view class="section">
				<view class="amount-section">
					<view class="section">
						<text class="section-title"></text>
						<view class="input-group">
							<input class="basic-input" placeholder="请输入内容" v-model="basicValue" @input="onInput"
								@focus="onFocus" @blur="onBlur" />
						</view>
					</view>
					<view class="amount-right">
						<text class="price-info">{{p_price}}元/升</text>
						<text class="volume-info">{{form.num}}升</text>
					</view>
				</view>
			</view>


			<!-- 快捷金额选择 -->
			<view class="quick-amount-section">
				<view class="quick-amount-grid">
					<view v-for="amount in quickAmounts" :key="amount" class="amount-item"
						:class="{ active: selectedQuickAmount === amount }" @tap="selectQuickAmount(amount)">
						<text class="amount-value">{{ amount }}</text>
					</view>
				</view>
			</view>

			<!-- 付款备注 -->
			<!-- <view class="remark-section">
        <label class="remark-item" @click="toggleRemark">
          <view class="checkbox-wrapper">
            <view class="checkbox" :class="{ checked: addRemark }">
              <text class="checkmark" v-if="addRemark">✓</text>
            </view>
          </view>
          <text class="remark-text">添加付款备注</text>
        </label>
      </view> -->

			<view class="divider"></view>

			<!-- 支付方式 -->
			<view class="section">
				<view class="section-title">
					<text>支付方式</text>
				</view>
				<view class="payment-options">
					<label class="payment-item" @click="selectPayment('wechat')">
						<view class="radio-wrapper">
							<view class="radio" :class="{ active: paymentMethod === 'wechat' }">
								<view class="radio-inner" v-if="paymentMethod === 'wechat'"></view>
							</view>
						</view>
						<text class="payment-text">微信</text>
					</label>

					<!-- <label class="payment-item" @click="selectPayment('wallet')">
            <view class="radio-wrapper">
              <view class="radio" :class="{ active: paymentMethod === 'wallet' }">
                <view class="radio-inner" v-if="paymentMethod === 'wallet'"></view>
              </view>
            </view>
            <text class="payment-text">会员钱包</text>
          </label>
          
          <label class="payment-item" @click="selectPayment('card')">
            <view class="radio-wrapper">
              <view class="radio" :class="{ active: paymentMethod === 'card' }">
                <view class="radio-inner" v-if="paymentMethod === 'card'"></view>
              </view>
            </view>
            <text class="payment-text">通用卡 (余额 ¥ 0.00)</text>
          </label> -->
				</view>
			</view>

			<view class="divider"></view>

			<!-- 支付底部栏 -->
			<view class="payment-footer">
				<view class="amount-total">
					<text class="total-symbol">￥</text>
					<text class="total-amount">{{pay_price}}</text>
					<text class="detail-link"  @click="openPriceDetail">明细</text>
				</view>
				<view class="pay-btn" @click="handlePayment">
					<text>立即支付</text>
				</view>
			</view>
		</view>
		
		<!-- 优惠明细 -->
		<uni-popup ref="totalDetail_show" type="bottom" :mask-click="false">
			<view class="detail-content">
				<view class="w-center">
					<view class="m-detail-title df df-justify-content-between df-align-items">
						<view></view>
						<text>待支付明细</text>
						<view class="close-btn" @click="close">
						   <text class="iconfont icon-guanbi" style="color: #999999;font-size: 32rpx;">x</text>
						</view>
					</view>
					<view class="d-content">
						<view class="item-title">
							商品明细
						</view>
						<view class="d-item">
							<view class="item-left">
								加油升数
							</view>
							<view class="item-right">
								{{od.num}}升
							</view>
						</view>
						<view class="d-item">
							<view class="item-left">
								加油金额
							</view>
							<view class="item-right">
								￥{{od.userInputTotal}}
							</view>
						</view>
						<view class="item-title">
							优惠明细
						</view>
						<view class="d-item">
							<view class="item-left">
								直降优惠
							</view>
							<view class="item-right">
								-￥{{Number(od.discount_amount).toFixed(2)}}
							</view>
						</view>
						
						<view class="d-item">
							<view class="item-left">
								服务费
							</view>
							<view class="item-right" v-if="od.serviceFee == 0">
								￥0.00
							</view>
							<view class="item-right" v-else>
								+￥{{Number(od.serviceFee).toFixed(2)}}
							</view>
						</view>		
						<view class="d-item">
							<view class="item-left">
								本次优惠
							</view>
							<view class="item-right" style="color: #F12F63;"
								v-if="od.totalDiscount && od.totalDiscount>0">
								-￥{{Number(od.totalDiscount).toFixed(2)}}
							</view>
							<view class="item-right" v-else>
								￥0.00
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		


		<!-- 油品筛选 -->
		<uni-popup ref="oil_show" type="bottom" :mask-click="false">
			<view class="gun-selector-modal">
				<view class="modal-content" @click.stop>
					<view class="oil-filter">
						<view v-for="filter in oilFilters" :key="filter.value" class="filter-item"
							:class="{ active: currentFilter === filter.value }" @click="changeFilter(filter.value)">
							<text>{{ filter.label }}</text>
						</view>
					</view>

					<!-- 枪号列表 -->
					<view class="gun-grid">
						<view v-for="gun in filteredGuns" :key="gun.gun_name" class="gun-card"
							:class="{ selected: tempSelectedGun === gun.gun_name }"
							@click="selectTempGun(gun.gun_name,gun.oil_name )">
							<view class="gun-number">
								<text>{{ gun.gun_name }}</text>
							</view>
							<view class="gun-type">
								<text>{{ gun.oil_name }}</text>
							</view>
						</view>
					</view>

				</view>
			</view>


		</uni-popup>

	</view>
</template>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import api from '@/api/station.js'
	export default {
		data() {
			return {
				isFocused: false,
				pay_price: 0,
				p_price: 0,
				station_name: "",
				basicValue: 0,
				addRemark: false,
				paymentMethod: 'wechat',
				tempSelectedGun: null,
				currentFilter: 'all',
				selectedQuickAmount: null,
				amount: '',
				oilFilters: [{
					label: '全部',
					value: 'all'
				}],
				guns: [{
						gun_name: 1,
						oil_name: '92'
					},

				],
				quickAmounts: [],
				form: {
					gun_name: '',
					oil_name: '',
					total: 0,
					station_id: 0,
					num: 0

				},
				order_id: 0,
				wx_user:{},
				od:{}

			}
		},

		computed: {
			filteredGuns() {
				if (this.currentFilter === 'all') {
					return this.guns
				}
				return this.guns.filter(gun => {
					// if (this.currentFilter === '0') {
					//   return gun.oil_name === '0#柴油'
					// }
					return gun.oil_name === this.currentFilter
				})
			}
		},
		onLoad(options) {
			// 解码参数
			// uni.navigateTo({
			// 	url: '/pages/member/activate-card/index?cardId="p6HHw6mj-C_U7pblCqoW0e9L7dSE"'
			// })


			this.getDetail(); //获取油站详情
			setTimeout(() => {
				this.openOil()
			}, 500);

			this.getQuickList(); //获取快捷支付金额
			this.getOilType();


		},
		methods: {
			
			openOil() {
				this.$refs.oil_show.open();
			},
			openPriceDetail(){
				this.$refs.totalDetail_show.open();
			},
			changeFilter(filter) {
				this.currentFilter = filter
			},
			getQuickList() {
				//获取快捷支付金额
				api.getQuick().then(res => {
					if (res.code == 1) {
						this.quickAmounts = res.data;
					}
				})
			},
			getOilType() {
				api.getOilType().then(res => {
					console.log(res.data);
					if (res.code == 1) {
						this.oilFilters = res.data;
					}
				})
			},
			getDetail() {
				api.getStationInfo().then(res => {
					console.log(res, 'getDetail')
					if (res.code == 1) {
						this.station_name = res.data.name;
						this.form.station_id = res.data.id;
						this.p_price = res.data.price;
						this.guns = res.data.gun_list;
						
						// let cardId = "p6HHw6mj-C_U7pblCqoW0e9L7dSE"
						// uni.navigateTo({
						// 	url: 'pages/member/activate-card/index?cardId='+cardId
						// })
						// if(this.wx_user){
						// 	this.wx_user = res.data.wx_user;
						// 	let card_id = this.wx_user.card_id??p6HHw6mj-C_U7pblCqoW0e9L7dSE
						// 	uni.navigateTo({
						// 		url: 'pages/member/activate-card/index?cardId='+this.wx_user.card_id
						// 	})
						// }
						
						

					}
				})
			},

			toggleRemark() {
				this.addRemark = !this.addRemark
			},
			selectPayment(method) {
				this.paymentMethod = method
			},
			selectTempGun(gunId, gunType) {
				//选择枪号
				this.tempSelectedGun = gunId;
				this.form.gun_name = gunId;
				this.form.oil_name = gunType;
				setTimeout(() => {
					this.$refs.oil_show.close();
				}, 500)

			},
			// 选择快捷金额
			selectQuickAmount(amount) {
				this.amount = amount.toString();
				this.selectedQuickAmount = amount;
				this.basicValue = amount;
				this.form.total = amount;
				this.getprice();
			},
			onFocus(event) {
				this.isFocused = true;
				this.$emit('focus', event);
			},
			onInput(event) {
				const value = event.detail.value;
				this.basicValue = value;
				this.form.total = value;
				this.pay_price = value;
				this.$emit('input', value);
				this.$emit('change', value);
			},
			onBlur() {
				//获取快捷支付金额
				let params = this.form;
				api.getPrice(params).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.form.num = res.data.num;
						this.selectedQuickAmount = res.data.num;
					}
				})
			},
			getprice() {
				//获取快捷支付金额
				let params = this.form;
				api.getPrice(params).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.form.num = res.data.num;
						this.pay_price = res.data.total;
						this.p_price = res.data.p_price;
						
						this.od = res.data
					}
				})
			},
			close() {
				this.$refs.totalDetail_show.close();
			},
			handlePayment() {
				// uni.showLoading({
				// 	title: '支付中...',
				// 	mask: true
				// })
				let clone = this.form;
				api.addOrder(clone).then(res => {
					console.log(res, 'addorder')
					if (res.code == 1) {
						this.order_id = res.data.order_id;
						this.wxPay()
					} else {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});

					}
				})
			},
			// 立即支付
			wxPay() {
				let that = this;
				uni.showLoading({
					title: '请稍等',
					mask: true
				});
				const orderId = this.order_id;
				console.log(orderId, 'orderId');

				// 获取微信支付参数
				api.pay({
					order_id: orderId,
				}).then(rs => {
					console.log(rs, 'pay')
					if (rs.code == 1) {
						this.launchWechatPayment(rs.data.prePayTn)
					}
				});
			},
			// 调起微信支付
			launchWechatPayment(payParams) {
				return new Promise((resolve, reject) => {
					// 检查微信JSBridge是否可用
					if (typeof WeixinJSBridge === "undefined") {
						// 如果未加载，监听加载事件
						if (document.addEventListener) {
							document.addEventListener('WeixinJSBridgeReady', () => {
								this.invokeWechatPay(payParams, resolve, reject);
							}, false);
						} else {
							reject(new Error('微信支付环境初始化失败，请刷新页面重试'));
						}
					} else {
						this.invokeWechatPay(payParams, resolve, reject);
					}
				});
			},
			// 执行微信支付
			invokeWechatPay(jsonString, resolve, reject) {
				 // 解析JSON字符串为对象
				      const payParams = JSON.parse(jsonString);
				console.log(payParams.appId,"11111_invokeWechatPay");
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						appId: payParams.appId, // 公众号ID
						timeStamp: payParams.timeStamp, // 时间戳
						nonceStr: payParams.nonceStr, // 随机字符串
						package: payParams.package, // 预支付交易会话标识
						signType: payParams.signType || 'MD5', // 签名类型
						paySign: payParams.paySign // 签名
					},
					(res) => {
						// 支付结果回调
						this.handlePaymentCallback(res, resolve, reject);
					}
				);
			},

			// 处理支付回调
			handlePaymentCallback(res, resolve, reject) {
				console.log('微信支付回调:', res);

				switch (res.err_msg) {
					case "get_brand_wcpay_request:ok":
						// 支付成功
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000
						});
						//this.onPaymentSuccess();
						resolve(res);
						break;

					case "get_brand_wcpay_request:cancel":
						// 用户取消支付
						uni.showToast({
							title: '支付已取消',
							icon: 'none',
							duration: 2000
						});
						reject(new Error('用户取消支付'));
						break;

					default:
						// 支付失败
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							duration: 2000
						});
						reject(new Error('支付失败: ' + res.err_msg));
						break;
				}
			},
			// 支付成功处理
			onPaymentSuccess() {
				// 更新订单状态
				
			},
			// 支付错误处理
			handlePaymentError(error) {
				console.error('支付错误:', error);

				let errorMessage = '支付失败，请重试';

				if (error.message.includes('网络请求失败')) {
					errorMessage = '网络连接失败，请检查网络';
				} else if (error.message.includes('用户取消')) {
					errorMessage = '支付已取消';
				} else if (error.message.includes('环境初始化失败')) {
					errorMessage = '支付环境异常，请刷新页面';
				}

				uni.showModal({
					title: '支付提示',
					content: errorMessage,
					showCancel: false,
					confirmText: '知道了',
					success: () => {
						// 可以根据错误类型提供重试
						if (!error.message.includes('用户取消')) {
							this.showRetryOption();
						}
					}
				});
			},
			// 显示重试选项
			showRetryOption() {
				uni.showModal({
					title: '支付失败',
					content: '是否重新尝试支付？',
					confirmText: '重试',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.handleWechatPay();
						}
					}
				});
			},

		}
	}
</script>

<style scoped>
	.gas-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
		display: block;
		margin-bottom: 10rpx;
	}

	.domain {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.main-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 40rpx;
	}

	.content {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 20rpx;
	}

	/* 枪号信息 */
	.gun-info {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 24rpx;
	}

	.gun-badge {
		width: 60rpx;
		height: 60rpx;
		background: #007AFF;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.gun-type {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		margin-right: auto;
	}

	.admin-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 金额区域 */
	.amount-section {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.amount-left {
		flex: 1;
	}

	.input-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 20rpx;
		display: block;
	}

	.amount-display {
		display: flex;
		align-items: baseline;
	}

	.amount-symbol {
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
		margin-right: 8rpx;
	}

	.amount-value {
		font-size: 48rpx;
		font-weight: bold;
		color: #000;
	}

	.amount-right {
		text-align: right;
	}

	.price-info {
		font-size: 24rpx;
		color: #007AFF;
		font-weight: bold;
		display: block;
		margin-bottom: 8rpx;
	}

	.volume-info {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	/* 备注区域 */
	.remark-section {
		margin-bottom: 30rpx;
	}

	.remark-item {
		display: flex;
		align-items: center;
	}

	.checkbox-wrapper {
		margin-right: 20rpx;
	}

	.checkbox {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #ccc;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		border-color: #007AFF;
		background: #007AFF;
	}

	.checkmark {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}

	.remark-text {
		font-size: 28rpx;
		color: #000;
	}

	/* 分割线 */
	.divider {
		height: 2rpx;
		background: #e0e0e0;
		margin: 30rpx 0;
	}

	/* 支付方式 */
	.payment-options {
		background: #f8f9fa;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.payment-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.payment-item:last-child {
		border-bottom: none;
	}

	.radio-wrapper {
		margin-right: 20rpx;
	}

	.radio {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.radio.active {
		border-color: #007AFF;
	}

	.radio-inner {
		width: 20rpx;
		height: 20rpx;
		background: #007AFF;
		border-radius: 50%;
	}

	.payment-text {
		font-size: 28rpx;
		color: #000;
	}

	/* 支付底部栏 */
	.payment-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		padding: 20rpx 0;
	}

	.amount-total {
		display: flex;
		align-items: baseline;
	}

	.total-symbol {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		margin-right: 4rpx;
	}

	.total-amount {
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
		margin-right: 30rpx;
	}

	.detail-link {
		font-size: 24rpx;
		color: #007AFF;
	}

	.pay-btn {
		background: #007AFF;
		color: white;
		padding: 20rpx 60rpx;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-weight: bold;
	}



	/* 弹窗样式 */
	.gun-selector-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		padding: 40rpx;
	}

	.modal-content {
		background: white;
		border-radius: 20rpx;
		width: 100%;
		max-height: 90vh;
		overflow-y: auto;
		padding: 30rpx;
	}

	.modal-header {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		display: block;
		margin-bottom: 8rpx;
	}

	.modal-domain {
		font-size: 22rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}

	.modal-main-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		display: block;
	}

	.modal-section {
		margin-bottom: 30rpx;
	}

	.modal-section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 10rpx;
	}

	.modal-subtitle {
		font-size: 24rpx;
		color: #666;
	}

	/* 油品筛选 */
	.oil-filter {
		display: flex;
		background: #f8f9fa;
		border-radius: 10rpx;
		padding: 8rpx;
		margin-bottom: 30rpx;
	}

	.filter-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 10rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666;
	}

	.filter-item.active {
		background: white;
		color: #007AFF;
		font-weight: bold;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 枪号网格 */
	.gun-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.gun-card {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		border: 2rpx solid transparent;
		transition: all 0.3s;
	}

	.gun-card.selected {
		border-color: #007AFF;
		background: #e6f3ff;
		transform: scale(0.95);
	}

	.gun-number {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 10rpx;
	}

	.gun-type {
		font-size: 24rpx;
		color: #666;
	}

	/* 快捷金额区域 */
	.quick-amount-section {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.quick-amount-grid {
		display: flex;
		justify-content: space-between;
	}

	.amount-item {
		flex: 1;
		margin: 0 10rpx;
		padding: 20rpx 0;
		background: #f8f9fa;
		border: 2rpx solid #e9ecef;
		border-radius: 12rpx;
		text-align: center;
		transition: all 0.2s;
	}

	.amount-item.active {
		background: #007AFF;
		border-color: #007AFF;
		transform: scale(1.05);
	}

	.amount-value {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.amount-item.active .amount-value {
		color: #ffffff;
	}
	
	/* 优惠明细 */
	.detail-content {
		width: 100%;
		min-height: 70vh;
		padding-bottom: 112rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
	
		.d-content {
			margin: 20rpx 10rpx;
	
			.item-title {
				height: 80rpx;
				line-height: 80rpx;
				font-weight: bold;
			}
	
			.d-item {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	
		.w-center {
			/* .m-detail-title {
				padding-top: 30rpx;
	
				text {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
				}
			} */
			
			.m-detail-title {
			    padding-top: 30rpx;
			    position: relative; /* 添加这个，让关闭按钮相对于标题定位 */
			    text-align: center;
			}
			
			.m-detail-title text {
			    font-size: 34rpx;
			    font-family: PingFang SC;
			    font-weight: bold;
			    color: #1A1A1A;
			}
	
			.label-title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
				// padding-bottom: 40rpx;
			}
	
			.detail-item {
				padding-bottom: 30rpx;
	
				view {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
	
				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
				}
			}
	
			.shop-list {
				.act-item {
					border: 1px solid #F12F63 !important;
					color: #F12F63;
					background: rgba(241, 47, 99, .1);
					box-sizing: border-box;
				}
	
				view {
					// width: 23%;
					height: 60rpx;
					// padding: 0 40rpx;
					background: #F2F2F2;
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7B8195;
					letter-spacing: 1px;
					margin-right: 40rpx;
					margin-bottom: 30rpx;
					padding: 0 30rpx;
				}
			}
	
		}
		
		.close-btn {
		    position: absolute;
		    top: 20rpx;
		    right: 20rpx;
		    width: 60rpx;
		    height: 60rpx;
		    background: #FF3B30;
		    border-radius: 5rpx;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: white !important;
		    font-size: 24rpx !important;
		    box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
		}
		
	}
	
</style>